<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8" />
    <link href="static/css/other/animate.css" rel="stylesheet" />
    <link href="static/css/plugins/datapicker/datepicker3.css" rel="stylesheet" />
    <link href="static/css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="static/css/other/font-awesome.min.css" rel="stylesheet" />
    <link href="static/css/other/style.min.css?v=4.1.0" rel="stylesheet" />
    <link href="static/css/qrcode/qrcode.css" rel="stylesheet" />

</head>

<body>

    <div class="gray-bg">
        <div class="dashboard-header top-bar">
            <div class="col-sm-8 overview row">
                <div class="col-sm-2">
                    <strong>统计：</strong>
                </div>
                <div class=" col-sm-2">
                    <i class="fa fa-arrows" style="color: rgba(27,187,158,1)"></i>
                    自动生成
                    <h>
                        1
                    </h>
                </div>
                <div class=" col-sm-2">
                    <i class="fa fa-hand-pointer-o" style="color: rgba(27,187,158,1)"></i>
                    手动生成
                    <h>
                        1
                    </h>
                </div>
                <div class=" col-sm-2">
                    <i class="fa fa-circle" style="color: rgba(27,187,158,1)"></i>
                    可用
                    <h>
                        1
                    </h>
                </div>
                <div class=" col-sm-2">
                    <i class="fa fa-circle" style="color:gray"></i>
                    不可用
                    <h>
                        1
                    </h>
                </div>
            </div>
        </div>
        <div class="m-b-sm"></div>
        <div class=" wrapper animated fadeInRight">
            <div class="ibox">
                <div class="ibox-title  row">
                    <h5>二维码列表
                    </h5>
                </div>
                <div class="ibox-content  border-bottom row">
                    <form id="searchForm" class="col-lg-10">
                        <div class="col-md-2">
                            <div class="form-group">
                                <input type="text" value="" placeholder="充电站" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <select class="form-control m-b">
                                    <option value="" disabled selected hidden>充电桩</option>
                                    <option>电桩A</option>
                                    <option>电桩B</option>
                                    <option>电桩C</option>
                                    <option>电桩C</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <select class="form-control m-b">
                                    <option value="" disabled selected hidden>生成方式</option>
                                    <option>自动</option>
                                    <option>手动</option>

                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <input type="text" value="" placeholder="是否可用" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <div class="input-group date">
                                    <input type="text" class="form-control layer-date" placeholder="选择时间"
                                           onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"/>
                                    <span class="input-group-addon"><i class="fa fa-calendar" style="color:rgba(27,187,158,1)"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label type="button" class="btn-sm btn-primary">查询</label>

                            <label type="button" id="reset" onclick="reset()" class="btn btn-sm btn-default">重置</label>
                        </div>
                    </form>

                </div>
                <div class="ibox-content m-b-sm border-bottom row">
                    <table class="table table-striped table-bordered ">
                        <thead >
                            <tr id ="title" >

                                <th>序号</th>
                                <th>运营商</th>
                                <th>充电站</th>
                                <th>充电桩</th>
                                <th>二维码列表</th>
                                <th>二维码内容</th>
                                <th>生成方式</th>
                                <th>是否可用</th>
                                <th>生成时间</th>
                                <th>操作</th>

                            </tr>
                        </thead>
                        <tbody id="list">
                            <tr>
                                <td>
                                    01
                                </td>
                                <td>
                                    科佳同创
                                </td>
                                <td>
                                    交大充电站
                                </td>
                                <td>
                                    1#直流充电桩
                                </td>
                                <td>
                                    http:www.baidu.com/a.png
                                </td>
                                <td>
                                    XXXXXXXXXX
                                </td>
                                <td>
                                    <i class="fa fa-hand-pointer-o" style="color: rgba(27,187,158,1)"></i>
                                    手动
                                </td>
                                <td>
                                    <i class="fa fa-circle" style="color: rgba(27,187,158,1)"></i>
                                    可用
                                </td>
                                <td>
                                    2018-03-22 15:56:56
                                </td>
                                <td>
                                    <a data-toggle="modal link" href="#myModal">
                                        手动生成二维码
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    01
                                </td>
                                <td>
                                    科佳同创
                                </td>
                                <td>
                                    交大充电站
                                </td>
                                <td>
                                    1#直流充电桩
                                </td>
                                <td>
                                    http:www.baidu.com/a.png
                                </td>
                                <td>
                                    XXXXXXXXXX
                                </td>
                                <td>
                                    <i class="fa fa-hand-pointer-o" style="color: rgba(27,187,158,1)"></i>
                                    手动
                                </td>
                                <td>
                                    <i class="fa fa-circle" style="color: rgba(27,187,158,1)"></i>
                                    可用
                                </td>
                                <td>
                                    2018-03-22 15:56:56
                                </td>
                                <td>
                                    <a data-toggle="modal" href="#myModal">
                                        手动生成二维码
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    01
                                </td>
                                <td>
                                    科佳同创
                                </td>
                                <td>
                                    交大充电站
                                </td>
                                <td>
                                    1#直流充电桩
                                </td>
                                <td>
                                    http:www.baidu.com/a.png
                                </td>
                                <td>
                                    XXXXXXXXXX
                                </td>
                                <td>
                                    <i class="fa fa-hand-pointer-o" style="color: rgba(27,187,158,1)"></i>
                                    手动
                                </td>
                                <td>
                                    <i class="fa fa-circle" style="color: rgba(27,187,158,1)"></i>
                                    可用
                                </td>
                                <td>
                                    2018-03-22 15:56:56
                                </td>
                                <td>
                                    <a data-toggle="modal" href="#myModal">
                                        手动生成二维码
                                    </a>
                                </td>
                            </tr>

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>

    <div id="myModal" class="modal fade" aria-hidden="false">
        <div class="modal-dialog modal-self">

            <div class="modal-content mcontent ">
                <div class="modal-header mheader">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">二维码信息</h4>
                </div>
                <div class="modal-body">
                    <div class = "row">
                            <span class="badge"><h5 class ="qrid">交大充电张blblbblb</h5></span>
                    </div>
                    <img class ="qr-img" src="static/images/qrcode.png"></img>
                    <div class = "row refresh" >
                         <i class="fa fa-refresh" ></i>
                                   <a href="">刷新</a>
                    </div>
                </div>
                <div class="modal-footer" >
                    <a  class=" btn btn-primary"  href="https://qr.api.cli.im/qr/downQr?data=%25E6%2588%2591%25E5%25B8%2585%25E5%2590%2597&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=260&kid=cliim&key=efd5b981bafde2e97b124f2e511203eb" >下载到本地</a>
            </div>
        </div>
    </div>
    </div>


    <script src="static/js/jquery/jquery.min.js"></script>
    <script src="static/js/bootstrap/bootstrap.min.js"></script>
    <script src="static/js/qrcode/qrcode.js"></script>
    <!-- Data picker -->
    <script src="static/js/other/laydate/laydate.js"></script>


</body>

</html>